<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
	font-family: "微软雅黑"
}
div,span {
	width: 140px;
	height: 140px;
	margin: 20px;
	background: #9999CC;
	border: #000 1px solid;
	float: left;
	font-size: 17px;
	font-family: Roman;
}

div.mini {
	width: 40px;
	height: 43px;
	background: #CC66FF;
	border: #000 1px solid;
	font-size: 12px;
	font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
	//让整个页面加载完成
	$(document).ready(function() {
		/* ---------基本选择器练习--------- */
		//改变元素名为 <div> 的所有元素的背景色为 #FF69B4"  id="b1"
		$("#b1").click(function(){
			$("div").css("background-color","#FF69B4");
		})

		//改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
		 $("#b2").click(function () {
		 	$("#one").css("background-color","#9ACD32");

		 })

		//改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
		 $("#b3").click(function () {
		 	$(".mini").css("background-color","#FF0033");

		 })

		//改变所有元素的背景色为 #FDF5E6"  id="b4"
		$("#b4").click(function () {
			$("*").css("background-color","#FDF5E6");
		})

		//改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"  id="b5"
		 $("#b5").click(function () {
		 	$("span,#two",).css("background-color","#FF1493");
		 })

		//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b6"
		 $("#b6").click(function () {
		 	$("span,#two,#one,.mini").css("background-color","#006400");
		 })

	});
</script>
</head>

<body>
	<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
	<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
	<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
	<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
	<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
		id="b5" />
	<input type="button"
		value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
		id="b6" />


	<h1>天气冷了</h1>
	<h2>天气又冷了</h2>

	<div id="one">id为one</div>

	<div id="two" class="mini">
		id为two class是 mini
		<div class="mini"> class是 mini</div>
	</div>

	<div class="one">
		class是 one
		<div class="mini"> class是 mini</div>
		<div class="mini"> class是 mini</div>
	</div>
	<div class="one">
		class是 one
		<div class="mini01"> class是 mini01</div>
		<div class="mini"> class是 mini</div>
	</div>

	<br>
	<div id="mover">动画</div>
	<br>
	<span class="spanone"> span </span>
	<span class="mini"> span class是mini </span>
</body>
</html>



